<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
	 xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
	 xmlns:mf="http://typo3.org/ns/MiniFranske/FsMediaGallery/ViewHelpers">

	<!--
	 Displays a flattened, one-dimensional album list
	 Theme: Bootstrap3
	-->

	<f:section name="AlbumsList">
		<style>
			/*-- 精彩瞬间global --*/
			.index-Moments {/*background:#f7f7f7; */padding:20px 0;float: left;padding-top: 0;}
			.index-Moments .title {margin-bottom: 10px;}
			.index-Moments strong {font-size:2em;  margin-left:-12px; font-weight: normal; color:#666666;}
			.index-Moments h4.name { font-size: 16px; margin-bottom: 5px;background: white;}
			.img-thumbnail h4.name{margin-bottom: 0 !important;text-align: center;}
			@media(max-width: 768px){
				.index-Moments h4.name{/*height: 74px;*/}
				.albums-list .index-Moments .item{margin-bottom: 20px;}
			}
			.index-Moments h4.name a{padding:12px 10px;display: inline-block;line-height: 1.5em;}	
			.index-Moments .row {background:white;}
			.index-Moments .row .item { float: none; display: inline-block; vertical-align: top; margin-bottom: 15px;}
			.index-Moments .row .item>a { display: block; position: relative;}
			.index-Moments .row .item .thumb-hover { position: absolute; bottom: 0; width: 100%; padding: 2px 5px; text-align: center; color: #ffffff; background: rgba(0, 0, 0, 0.3); display: none;}
			.index-Moments .row .item>a:hover .thumb-hover { display: block;}
		</style>
		<div class="albums-list">
			<mf:widget.paginate objects="{mediaAlbums}" as="paginatedAlbums" widgetId="album" configuration="{itemsPerPage:settings.list.pagination.itemsPerPage, insertAbove:settings.list.pagination.insertAbove, insertBelow:settings.list.pagination.insertBelow, maximumNumberOfLinks:settings.list.pagination.maximumNumberOfLinks, pagesBefore:settings.list.pagination.pagesBefore, pagesAfter:settings.list.pagination.pagesAfter}">
				<f:if condition="{paginatedAlbums}">
					<f:then>
						<div class="row-top-default index-Moments">
							<!-- <div class="container-fluid">
								<div class="row"> -->
									<f:for each="{paginatedAlbums}" as="pagedMediaAlbum">
										<!-- <div class="thumb col-xs-6 col-sm-4 col-md-3 col-lg-2"> -->
										<div class="col-sm-4 item">
											<f:render section="AlbumPreview" arguments="{mediaAlbum:pagedMediaAlbum}" />
										</div>
									</f:for>
								<!-- </div>
							</div> -->
						</div>
					</f:then>
					<f:else>
						<div class="alert alert-info">
							<p><f:translate key="no_albums_found">No albums found.</f:translate></p>
						</div>
					</f:else>
				</f:if>
			</mf:widget.paginate>
		</div>
	</f:section>

	<f:section name="AlbumPreview">
		<f:if condition="{0:0, 1:1} == {0:mediaAlbum.assetsCount, 1:settings.list.hideEmptyAlbums}">
			<f:else>
				<div class="img-thumbnail">
					<f:render partial="MediaAlbum/Thumb" section="Thumb" arguments="{mediaAlbum:mediaAlbum, random:settings.list.thumb.random, width:settings.list.thumb.width, height:settings.list.thumb.height, resizeMode:settings.list.thumb.resizeMode}" />
				</div>
			</f:else>
		</f:if>
	</f:section>

</div>